import React, { Fragment } from 'react';
import { Card, Icon, List, Typography } from 'antd';
import styles from './style.less';
import './index.css';
import AxPageHeaderWrapper from '@/components/AxBase/AxPageHeaderWrapper';
import { AxCardListProps, AxCardListBxProps } from './data';

const { Paragraph } = Typography;

const AxCardList: React.FC<AxCardListProps> = props => {
  const permissions = parseInt(localStorage.getItem('ax-auth-permissions') || '');
  const { title, data: dataFromProps } = props;
  /** 有权限的面板功能 */
  const data = dataFromProps.filter(
    i => !i.permissions || (permissions & i.permissions) > 0,
  );
  let content = undefined;
  let extraContent = undefined;

  if (title) {
    content = (
      <div>
        {title.desc && <>
          {title.desc}
        </>}
        {title.links && <div>
          {title.links.map((m: any, idx: any) => {
            const { menuId } = m;
            if (menuId) {
              content = <a key={idx} target='_blank' href={`http://doc.esmis.smgxh.com/help?tid=0&id=${menuId}`}><img alt='' src='/img/doc.svg' />&nbsp;&nbsp;操作文档</a>
              return content;
            }
            return (
              <a key={idx}>
                <img alt='' src={m.src} />{ }
                {m.text}
              </a>
            );
          }
          )}
        </div>}
      </div>
    );

    extraContent = title && title.extra && (
      <div>
        <img
          alt=""
          src={title.extra.src}
        />
      </div>
    ) || (
        <div>
          <img
            alt=""
            src="https://gw.alipayobjects.com/zos/rmsportal/RzwpdLnhmvDJToTdfDPe.png"
          />
        </div>
      );
  }

  return (
    <List<Partial<any>>
      rowKey="id"
      grid={{
        gutter: 16,
        xs: 1,
        sm: 2,
        md: 3,
        lg: 3,
        xl: 4,
        xxl: 4,
      }}
      dataSource={data}
      renderItem={(item) => {
        let actions = [<a key="option1" onClick={item.click}>点击进入</a>];
        if (item.actions) {
          actions = item.actions.map((m: any, idx: any) => (
            <a key={idx} onClick={m.click}>{m.text}</a>
          ));
        }
        return (
          <List.Item key={item.id}>
            <Card
              hoverable
              actions={actions}
              onClick={item.click}
            >
              <Card.Meta
                avatar={
                  <Icon type={item.icon} style={{ fontSize: '32px' }} />
                }
                title={<a>{item.title}</a>}
                description={
                  <Paragraph
                    ellipsis={{ rows: 3 }}
                  >
                    {item.desc}
                  </Paragraph>
                }
              />
            </Card>
          </List.Item>
        );
      }}
    />
  );
}

export const AxCardListBx: React.FC<AxCardListBxProps> = props => {
  const { data, span = 3, descRows = 3, showAction, ...rest } = props;

  const list = (
    <List<Partial<any>>
      rowKey="id"
      grid={{
        gutter: 16,
        xs: span,
        sm: span,
        md: span,
        lg: span,
        xl: span,
        xxl: span,
      }}
      dataSource={data}
      renderItem={item => {
        let actions = [];
        if (item.actions) {
          actions = item.actions.map((m: any, idx: any) => (
            <Fragment key={idx}>
              <a onClick={m.click}>
                {m.text}
              </a>
              &nbsp;&nbsp;
            </Fragment>
          ));
        }
        return (
          <List.Item key={item.id}>
            <Card hoverable onClick={item.click}>
              <Card.Meta
                avatar={
                  <>
                    {item.img}
                    <Icon type={item.icon} style={{ fontSize: '32px' }} />
                  </>
                }
                title={(item.title && <a>{item.title}</a>) || undefined}
                description={
                  <>
                    <Paragraph ellipsis={{ rows: descRows }}>
                      {item.desc}
                    </Paragraph>
                  </>
                }
              />
              <div style={{ marginTop: 6 }}>{actions}</div>
            </Card>
          </List.Item>
        );
      }}
      {...rest}
    />
  );

  return <div>{list}</div>;
};

export const AxCardListEx: React.FC<AxCardListProps> = props => {
  // const permissions = parseInt(localStorage.getItem(axhelper.getPageStorageKey('ax-auth-permissions') || '') || '');
  const { data, span = 3 } = props;
  /** 有权限的面板功能 */
  // const data = dataFromProps.filter(
  //   i => !i.permissions || (permissions & i.permissions) > 0,
  // );

  return (
    <div
      className={styles.cardList}
    >
      <List<Partial<any>>
        rowKey="id"
        grid={{
          gutter: 16,
          xs: 1,
          sm: 2,
          md: 3,
          lg: 3,
          xl: span,
          xxl: span,
        }}
        dataSource={data}
        renderItem={(item) => {
          let actions = [];
          if (item.actions) {
            actions = item.actions.map((m: any, idx: any) => (
              <a key={idx} onClick={m.click}>{m.text}</a>
            ));
          }
          return (
            <List.Item key={item.id}>
              <Card
                hoverable
                className={styles.card}
                actions={actions}
                onClick={item.click}
                bodyStyle={{ padding: 0 }}
              >
                <div className="ax-app-x"
                // onClick={() => gotoApp(item)}
                >
                  <div className="ax-app-icon">
                    {item.icon ? <Icon type={item.icon} style={{ fontSize: '32px' }} />
                      : item.img ? item.img : undefined}
                    {/* <img className="ax-app-img" src={item.img || '/img/default.jpg'} /> */}
                  </div>
                  <div className="ax-app-text">{item.title}</div>
                </div>
                {/* <Card.Meta
                                  avatar={
                                      item.icon ? <Icon type={item.icon} style={{ fontSize: '32px' }} />
                                          : item.img ? item.img : undefined
                                      // <img alt=""
                                      //   className={styles.cardAvatar}
                                      //   src={item.avatar}
                                      // />
                                  }
                                  title={<a>{item.title}</a>}
                                  description={item.desc &&
                                      <Paragraph
                                          className={styles.item}
                                          ellipsis={{ rows: 3 }}
                                      >
                                          {item.desc}
                                      </Paragraph>
                                  }
                              /> */}
              </Card>
            </List.Item>
          );
        }}
      />
    </div>
  );
}

export default AxCardList;
